<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>my home</title>
    <style>
        body{
            margin: 0
        }
        #head{
            height: 250px;
            width: 200px;
            /*background-color: red;*/
            position: fixed;
        }
        #pic-top{
           
            height: 500px;
            width: 100%;
        }
        #name{
            font-size: 20px;
            text-align: right;
        }
        h1{
            text-align: center;
        }
        p{
            text-indent: 2em;
        }
        #first-op{
            height: 100%;
            width: 800px;
            display: block;
            margin: 0 auto;
        }
        .second-op{
            height: 500px;
            width: 800px; 

        }
        a{
           font-size:50px;
           

        }

        #bg{
            width: 800px;
            height: 500px;
            background-image: url(7.jpg);
            position: relative;
            
        }
        .last-op{
            height: 200px;
            width: 200px;

            /* 圆角 */
            border-radius: 50%;
            border: 2px solid white;

        }
        #stu1{
            border: 1px solid wheat;
            position: absolute;
            left: 0;
            top: 0;
        }
        #stu2{
            position: absolute;
            right: 0;
            top: 0;
        }
        #stu3{
            position: absolute;
            
            /* 未验证 */
            /*margin: auto;
            left: 0;
            right: 0;
            bottom: 0;*/

            transform: translateX(-50%);
            left: 50%;
            right: 50%;
            bottom: 0;
        }
        
        a:hover{
            color: blue;
        }

        
    </style>
</head>
<body>
        <div id="head">
            <a href="#gx">广西</a><br><br><br><br><br>
            <a href="#gl">桂林</a><br><br><br><br><br>
            <a href="#gl">我的同学</a>
            
        </div>



        <img src="gxg.jpg" id="pic-top">
        <h1>我的家乡</h1>
        
        <div id="first-op">
        <p id="name">黎幽幽</p>
        <h2 id="gx">广西</h2>
        <p>广西壮族自治区（壮文：Gvangjsih Bouxcuegh Swcigih），通称广西，简称“桂”，首府南宁， 南临北部湾，是中国唯一沿海的自治区。截至2016年末，全区常住人口4838万人，下辖有14个地级市。

            广西得名于岭南西道、广南西路，是岭南文化传承的主要地区之一，又因境内大部分地区属于秦统一岭南设 置桂林郡而简称“桂”，春秋战国时期，广西属百越的一部分。1363年，设置广西行中书省，为广西建省之始。[2] 民国时期，广 西沿袭清制设省。1958年3月，广西省改为“广西僮族 自治区”，1965年10月，“广西僮族自治区”改名为“广西壮族自治区”

            广西地处中国华南地区，介于北纬20°54′－26°24′，东经104°26′－112°04，与广东、湖南、贵州、云南 相邻，并与海南隔海相望，南濒北部湾、面向东南亚，西南与越南毗邻，大陆海岸线长约1595千米，是西南地区最便捷的出 海通道，在中国与东南亚的经济交往中占有重要地位。广西是中国—东盟博览会的举办地。</p>
        <img src="gxl.jpg" class="second-op">
        <hr>
        <h2 id="gl">桂林</h2>
        <p>桂林，国家批准唯一的国际旅游城市和广西三大区域性中心城市、世界旅游组织向全球首推的最佳旅游目的地城市， 全国老工业基地和高新技术产业基地，中国面向欧亚、连接东盟的区域性文化旅游重要国际化城市和“一带 一路”有机衔接的综合交通枢纽，联合国世界旅游组织亚太旅游协会旅游趋势与展望国际论坛、中国—东盟博览 会旅游展的永久举办地和直属中央军委桂林联勤保障中心驻地

         桂林是首批国家历史文化名城，桂柳文化、桂系军阀发祥、兴盛于此。距今一万年前 已有先民在此繁衍生息，南郊的甑皮岩遗址是新石器时代的代表，距今已有7000年历史；近代孙中山在桂林设总统行 辕和北伐大本营；抗战时期，桂林成为中国最早光复的省会城市（解放以前都为广西省会），并是唯一一座在日本投 降前由中国军队主动收复的省会城市和全国抗战文化中心，因此桂林又称“文化城”</p>
        <img src="gxy.jpg" class="second-op">
        <hr>
        <h2>我的同学</h2>
        <div id="bg">
            <!--<div>-->
                <img class="last-op" id="stu1" src="1.jpg" >
                <img class="last-op" id="stu2"src="4.jpg" >
                <img class="last-op" id="stu3"src="6.jpg" >


            <!--</div>-->

        </div>
        
        </div>
        


</body>
</html>